<template>
    <el-aside>
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            router
            @open="handleOpen"
            @close="handleClose"
        >
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>尚硅谷Vue3入门到实战</span>
                </template>
                <el-sub-menu index="1-1">
                    <template #title><span>vue组件间通信</span></template>
                        <el-menu-item index="/communication/props">01_props</el-menu-item>
                        <el-menu-item index="/communication/custom-event">02_custom-event</el-menu-item>
                        <el-menu-item index="/communication/mitt">03_mitt</el-menu-item>
                        <el-menu-item index="/communication/v-model">04_v-model</el-menu-item>
                        <el-menu-item index="/communication/attrs">05_$attrs</el-menu-item>
                        <el-menu-item index="/communication/refs">06_$refs-$parent</el-menu-item>
                        <el-menu-item index="/communication/provide">07_provide-inject</el-menu-item>
                        <el-menu-item index="/communication/pinia">08_pinia</el-menu-item>
                        <el-menu-item index="/communication/slot">09_slot</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1-2">
                    <template #title><span>其它API</span></template>
                        <el-menu-item index="/others/shallow">01_shallowRef与shallowReactive</el-menu-item>
                        <el-menu-item index="/others/readonly">02_readonly</el-menu-item>
                        <el-menu-item index="/others/raw">03_raw</el-menu-item>
                        <el-menu-item index="/others/custom">04_customRef</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <template #title>尚硅谷Vue项目实战硅谷甄选</template>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>

<script lang="ts" setup name="HomeAside">
import { ref } from 'vue';


let isCollapse = ref(false)
function handleOpen(){

}
function handleClose(){
    
}
</script>

<style scoped>
</style>